<template>
  <li class="vivid-menu-item" :class="{ 'active': isActive(), 'vertical': mode == 'vertical' }" @click="handleClick">
    <slot></slot>
  </li>
</template>

<script lang="ts">
import { defineComponent, inject } from 'vue';

interface MenuInjection {
  activeIndex: string | number;
  setActiveIndex: (index: string | number) => void;
  mode: string;
}

export default defineComponent({
  name: 'ViMenuItem',
  props: {
    index: {
      type: [String, Number],
      required: true
    }
  },
  setup(props, { emit }) {
    const menu = inject<MenuInjection>('menu')!;
    const isActive = () => menu.activeIndex === props.index;
    const handleClick = () => {
      menu.setActiveIndex(props.index);
      emit('click', props.index);
    };
    return {
      isActive,
      handleClick,
      mode: menu.mode
    };
  }
});
</script>

<style scoped>
.vivid-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}

.vivid-menu-item:hover {
  background-color: #f5f5f5;
}

.vivid-menu-item.vertical.active {
  border-bottom: 0 !important;
  border-right: 2px solid var(--primary-color) !important;
}

.vivid-menu-item.active {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}
</style>
